<template>
    <div class="common_btns" :style="{width: Width, marginTop: MarginTop}">
        <div v-for="(item, index) in buttons" :key="'btn_'+index" 
            @click="btnClick(item)" class="btn" :class="customType(item.type)">
            {{ item.name }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    props: {
        Width: {
            type: String,
            default: '100%'
        },
        MarginTop: {
            type: String,
            default: '0'
        },
        // 按钮类型：commit、cancel、remove
        buttons: {
            type: Array,
            required: true
        }
    },
    computed: {
        
    },
    mounted() {

    },
    methods: {
        customType(type) {
            let className = 'commit_btn'
            switch (type) {
                case 'commit':
                    className = 'commit_btn'
                    break;
                case 'cancel':
                    className = 'cancel_btn'
                    break;
                case 'remove':
                    className = 'remove_btn'
                    break;   
                default:
                    break;
            }
            return className
        },
        btnClick(item) {
            this.$emit('superBtnClick', item)
        }
    }
}
</script>

<style scoped>
.common_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.common_btns .btn {
    min-width: 80px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    padding: 0 5px;
    margin: 0 16px;
    letter-spacing: 1px;
    cursor: pointer;
}
.commit_btn {
    background: #068CEE;
    color: #fff;
    border: none;
}
.cancel_btn {
    background: #FFF;
    color: #333;
    border: #eee solid 1px;
}
.remove {
    background: red;
    color: #fff;
    border: none;
}
</style>